<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易轮播图</title>
</head>
<body>

<!--
    v-bind 指令  绑定标签中的属性  实现属性的动态操作
-->

<div id="app">
    <img  v-bind:src="img" alt=""> <br>
<!--    v-bind的简写形式-->
    <img  :src="img" alt=""> <br>
    <button @click="change">切换图片</button>
</div>

<script src="../vue.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            images:['../imgs/1.png','../imgs/2.png','../imgs/3.png'],
            img:'../imgs/1.png',
            index:0
        },
        methods:{
            change(){
                this.index++
                if ( this.index > 2){
                    this.index = 0
                }
               this.img = this.images[this.index]
            }
        }
    })
</script>
</body>
</html>